<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
                <el-breadcrumb-item>车辆评论</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>

            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="评价id">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="客户名">
                    </el-table-column>
                    <el-table-column
                            prop="carName"
                            label="汽车名">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="评价内容">
                    </el-table-column>
                    <el-table-column
                            prop="addtime"
                            label="评论时间">
                    </el-table-column>
                    <el-table-column
                            prop="useNum"
                            label="评论点赞数量">
                    </el-table-column>
                    <!--<el-table-column label="操作" width="180">-->
                        <!--<template slot-scope="scope">-->
                            <!--&lt;!&ndash; 修改 &ndash;&gt;-->
                            <!--<el-button type="primary" icon="el-icon-edit" circle @click=""></el-button>-->
                            <!--&lt;!&ndash; 删除 &ndash;&gt;-->
                            <!--<el-button type="danger" icon="el-icon-delete" circle @click=""></el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                </el-table>
                <!-- 分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 7, 9]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>

        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                pageSize: 5,
                currentPage: 1,
                total: 0,
            }
        },
        methods:{
            handleSizeChange(value) {
                this.pageSize = value;
                this.showCarComment();
            },
            handleCurrentChange(value) {
                this.currentPage = value;
                this.showCarComment();
            },
            // 查询全部的评论
            showCarComment() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/carcomment/showCarComment',
                    params: {
                        pageno: this.currentPage,
                        pagesize: this.pageSize,
                    }
                }).then( result => {
                    if (result.data.code == 200) {
                        this.tableData = result.data.listData;
                        this.total = result.data.object.total;
                    }
                })
            }
        },
        created() {
            this.showCarComment()
        }
    }
</script>